<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="mydiv" id="myid" myattr="val">我是div</div>
        <!--我是注释-->
        <div class="mybox">我是box</div>
    </div>
    <script>
        // 一、元素节点 二、文本节点 
        // 三 、属性节点 
        // 获取属性节点  元素.attributes;
        // 映射
        /* 
            1. 属性节点的节点类型 ： nodeType === 2;
            2. 属性节点的节点名称 ： nodeName 是 属性名称
            3. 属性节点的节点值  ： nodeValue 是 属性值；
        */

        // var ele = document.querySelector(".mydiv");
        // var nodes= ele.attributes;
        // // console.log(nodes);
        // var node = nodes[0];
        // console.log(node);
        // console.log(node.nodeType); // 节点类型  2
        // console.log(node.nodeName); // 属性名
        // console.log(node.nodeValue); // 属性值

        // 四：注释节点 
        // 获取注释节点 

        /* 
            1.注释节点的节点类型 ： nodeType ===  8 ;
            2.注释节点的节点名称 ： nodeName 是  #comment
            3.注释节点的节点值 ： nodeValue 是 注释的内容
        
        
        */
        var  nodes = document.querySelector(".container").childNodes;
        // console.log(nodes);
        var node = nodes[3];
        // console.log(node);
        // console.log(node.nodeType);  // 节点类型
        // console.log(node.nodeName);
        // console.log(node.nodeValue);
        var str = node.nodeValue;
        document.querySelector(".mybox").innerHTML = str;


    /* 
      总结 :
                 元素节点     属性节点  文本节点  注释节点  
      nodeType      1          2         3         8
      nodeName  大写的标签名   属性名    #text     #comment
      nodeValue   null        属性值   文本内容   注释内容
        
        
        
        */
    </script>
</body>
</html>